<template>
  <el-dialog v-el-drag-dialog :title="form.title" :close-on-click-modal="false"  v-model="form.open" width="1000px"
    append-to-body>
    <el-tabs v-model="activeName" @tab-click="tabClick">
      <el-tab-pane label="基本信息" name="1">
        <el-form ref="form" :model="form.information" label-width="120px">
          <el-row v-for="(item, index) in information" :key="index">
            <el-col :span="12">
              <el-form-item :label="item[0].label" style="margin-bottom: 0;">
                {{ form.information[item[0].value] }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="item[1].label" style="margin-bottom: 0;">
                <span v-if="item[1].label == '签约状态:'">
                  {{ form.information[item[1].value] == 0 ? '生效' : form.information[item[1].value] == 1 ? '待签约' :
                    form.information[item[1].value] == 2 ? '停用' : form.information[item[1].value] == 7 ? '已驳回' :
                      form.information[item[1].value] == 8 ? '审批中' : '已解约' }}
                </span>
                <span v-else>
                  {{ form.information[item[1].value] }}
                </span>
              </el-form-item>
            </el-col>
            <div v-if="index == 4" style="width: 10px;height: 40px;"></div>
          </el-row>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="输入参数" name="2">
        <el-table :data="form.input" style="margin-top: 10px;" row-key="nodeId" v-loading="form.loading"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
          <el-table-column label="序号" type="index" />
          <el-table-column label="参数名" prop="nodeName" :show-overflow-tooltip="true" min-width="100" />
          <el-table-column label="描述" prop="nodeLabel" :show-overflow-tooltip="true" min-width="100" />
          <el-table-column label="参数类型" prop="nodeType" :show-overflow-tooltip="true" min-width="100" />
          <el-table-column label="是否必须" prop="nodeNeededable" :show-overflow-tooltip="true" min-width="100">
            <template #default="scope">
              <span>{{ scope.row.nodeNeededable == 'Y' ? '是' : '否' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="是否必填" prop="nodeValueable" :show-overflow-tooltip="true" min-width="100">
            <template #default="scope">
              <span>{{ scope.row.nodeValueable == 'Y' ? '是' : '否' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="校验规则" prop="nodeCheckRegex" :show-overflow-tooltip="true" min-width="100" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="输出参数" name="3">
        <el-table :data="form.output" style="margin-top: 10px;" row-key="nodeId" v-loading="form.loading"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
          <el-table-column label="序号" type="index" />
          <el-table-column label="参数名" prop="nodeName" :show-overflow-tooltip="true" min-width="100" />
          <el-table-column label="描述" prop="nodeLabel" :show-overflow-tooltip="true" min-width="100" />
          <el-table-column label="参数类型" prop="nodeType" :show-overflow-tooltip="true" min-width="100" />
          <el-table-column label="是否必须" prop="nodeNeededable" :show-overflow-tooltip="true" min-width="100">
            <template #default="scope">
              <span>{{ scope.row.nodeNeededable == 'Y' ? '是' : '否' }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel()">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>

export default {
  data () {
    return {
      activeName: '1',
      information: [
        [{ 'label': '能力名称:', 'value': 'serviceName' }, { 'label': '能力别名:', 'value': 'servicePath' }, { 'label': '能力编码:', 'value': 'serviceCode' }],
        [{ 'label': '所属分类:', 'value': 'cateName' }, { 'label': '签约应用:', 'value': 'appName' }],
        [{ 'label': '服务版本:', 'value': 'serviceMasterVersion' }, { 'label': '签约状态:', 'value': 'signStatus' }],
        [{ 'label': '能力描述:', 'value': 'serviceDesc' }, { 'label': '', 'value': '' }],
        [{ 'label': '', 'value': '' }, { 'label': '', 'value': '' }],
        [{ 'label': '能力类型:', 'value': 'serviceType' }, { 'label': '', 'value': '' }],
        [{ 'label': '请求方式:', 'value': 'httpRequestMethod' }, { 'label': '请求路径:', 'value': 'mockUrl' }],
        [{ 'label': '限流开关:', 'value': 'limitCtrlStatus' }, { 'label': '限流方式:', 'value': 'limitCtrlType' }],
        [{ 'label': '限流阈值:', 'value': 'limitCtrlParamval' }, { 'label': '预警响应时间:', 'value': 'alarmSecs' }],
        [{ 'label': '超时时间:', 'value': 'timeoutSecs' }, { 'label': '失败重试次数:', 'value': 'limitCtrlParamval' }],
        [{ 'label': '创建人:', 'value': 'createBy' }, { 'label': '创建时间:', 'value': 'createTime' }],
        [{ 'label': '更新人:', 'value': 'updateBy' }, { 'label': '更新时间:', 'value': 'updateTime' }],
      ],
    }
  },
  props: ['form'],
  watch: {
  },
  created () {
  },
  methods: {
    // 切换标签页
    tabClick (el, val) {
      console.log(el.name);
      this.$emit('tabClick',el.name)
    },
    cancel () {
      this.$emit('cancel')
    }
  }
}
</script>

<style lang="scss" scoped></style>
